<template>
  <div>
    <el-button type="text" @click="handleOpen">{{data.name}}</el-button>
    <UserInfoDialog ref="dialog" :userId="id" />
  </div>
</template>

<script>
import { setSession } from '@/utils/util'
import UserInfoDialog from '@/components/UserInfoDialog'
import { getUserInfo } from '@/api/archives'
import { userInfo } from '@/api/auth'

export default {
  name: 'UserLink',
  components: { UserInfoDialog },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      data: {}
    }
  },
  watch: {
    id(n, o) {
      this.getData()
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      if (this.id) {
        getUserInfo(this.id).then(res => {
          this.data = res.data
          setSession('userRow', res.data)
          this.$emit('callbackInfo', res.data)
        })
      }
    },
    handleOpen(){
      this.$refs.dialog.open()
    }
  }
}
</script>